
import QtQuick 1.0

Rectangle {
    id: pageOpenChats

    height: mytheme.displayHeight
    width: mytheme.displayWidth

    color: "black"
    anchors.fill: parent
    radius: mytheme.radiusMainWin
    clip: true


    property string clickedItem

    Text {
        id: txtBanner
        color: "gray"
        font.pixelSize: 40
        text: "Nothing open yet"
        anchors.centerIn: parent
        visible: cppListOfChats.count() === 0 ? true : false
        smooth: true
    }


    Component {
        id: componentDelegate
        Rectangle {
            id: delegateItem
            property alias pic: delegateImage.source
            border.color: "blue"
            color: "gray"
            width: mytheme.sizeSquareMenu - 4
            height: mytheme.sizeSquareMenu - 10
            radius: 10
            //clip: true

            property bool currentChat: false
            function animBack() {
                itemAnimBack.start()
            }

            states: [
                State {
                    name: "view"
                    PropertyChanges { target: imgClose; visible: false }
                    PropertyChanges { target: delegateItem; scale: 1.0 }
                    PropertyChanges { target: delegateItem; opacity: 1.0 }
                    PropertyChanges { target: imgClose; opacity: 0 }
                    PropertyChanges { target: pageOpenChats; stateChatClose: false }
                },
                State {
                    name: "close"
                    PropertyChanges { target: imgClose; visible: true }
                    PropertyChanges { target: delegateItem; scale: 0.95 }
                    PropertyChanges { target: delegateItem; opacity: 0.8}
                    PropertyChanges { target: imgClose; opacity: 1.0 }
                    PropertyChanges { target: pageOpenChats; stateChatClose: true }
                }
            ]
            state: "view"
            transitions: Transition {
                NumberAnimation { properties: "scale, opacity"; duration: 300 }
            }

            Image {
                id: imgClose
                z: 5
                source: "qrc:/qml/images/app_close.png"
                anchors.right: parent.right
                anchors.rightMargin: -10
                anchors.top: parent.top
                anchors.topMargin: - 10
                opacity: 1.0
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        cppMyXmppClient.closeChat( contactJid )
                    }
                }
            }

            Image {
                id: delegateImage
                source: contactPicAvatar === "" ? "qrc:/qml/images/avatar.png" : contactPicAvatar
                anchors.centerIn: parent
                //scale: delegateMouseArea.containsMouse ? 1.2 : 1
                Behavior on scale { NumberAnimation { duration: 300 } }
                smooth: true
                width: mytheme.sizeImageMenu
                height: mytheme.sizeImageMenu
            }

            Text {
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 10
                text: contactName === "" ? contactJid : contactName
                font.pixelSize: 22
                color: "yellow"
            }

            transform: [
                Rotation {
                    id: plateRotation
                    angle: -90
                    axis { x: 0; y: 1; z: 0 }
                    origin.x: -200
                    origin.y: 50
                },
                Rotation {
                    id: plateFlip
                    angle: 0
                    axis { x: 1; y: 0; z: 0 }
                    origin.x: 50
                    origin.y: 50
                }
            ]

            /* itemAnim - вперед */
            SequentialAnimation {
                id: itemAnim
                //PauseAnimation { duration: 200 }
                PauseAnimation { duration: Math.random()*600 }
                NumberAnimation {
                    target: plateRotation
                    properties: "angle"
                    easing.type: Easing.OutCubic
                    from: -90
                    to: 0
                    duration: 800
                }
            }

			/* itemAnimBack - назад */
            ParallelAnimation {
                id: itemAnimBack
                SequentialAnimation {
                    PauseAnimation { duration: 100 }
                    PauseAnimation { duration: Math.random()*800 }
                    NumberAnimation {
                        target: plateRotation
                        properties: "angle"
                        easing.type: Easing.OutCubic
                        from: 0
                        to: -90
                        duration: 500
                    }
                }
                SequentialAnimation {
                    PauseAnimation { duration: Math.random()*50 }
                    NumberAnimation { target: delegateItem; property: "rotation"; to:  1; duration: 50 }
                    NumberAnimation { target: delegateItem; property: "rotation"; to: -1; duration: 100 }
                    NumberAnimation { target: delegateItem; property: "rotation"; to:  0; duration: 50 }
                    loops: 7
                    alwaysRunToEnd: true
                }
                ScriptAction {
                    script: {
                        if( delegateItem.currentChat  ) {
                            main.chatJid = contactJid
                            __pageNextPause = 1600
                            __pageNext = "qrc:/qml/MessagesPage.qml"
                            animClosePage.running = true
                        }
                    }
                }
            }

            MouseArea {
                id: delegateMouseArea
                hoverEnabled: true
                anchors.fill: parent
            }

            Component.onCompleted: {
                itemAnim.start()
            }

        }
    }

    Rectangle {
        id: panelHeader
        z: 1
        width: parent.width
        height: 30
        anchors.top: parent.top
        anchors.left: parent.left
        gradient: Gradient {
            GradientStop { position: 0; color: pageOpenChats.color }
            GradientStop { position: 0.5; color: pageOpenChats.color }
            GradientStop { position: 1; color: "transparent" }
        }
    }

    Rectangle {
        id: panelFooter
        z: 1
        width: parent.width
        height: 30
        anchors.bottom: toolBar.top
        anchors.left: parent.left
        gradient: Gradient {
            GradientStop { position: 0; color: "transparent" }
            GradientStop { position: 0.5; color: pageOpenChats.color }
            GradientStop { position: 1; color: pageOpenChats.color }
        }
    }

    property bool stateChatClose: false
    GridView {
        id: gridView
        model: cppListOfChats
        anchors.top: panelHeader.bottom
        anchors.bottom: panelFooter.top
        width: parent.width
        height: parent.height
        cellHeight: mytheme.sizeSquareMenu
        cellWidth: mytheme.sizeSquareMenu
        delegate: componentDelegate
        focus: true
        MouseArea {
            id: ma
            enabled: !stateChatClose
            anchors.fill: parent
            onPressAndHold: {
                for( var L=0; L<gridView.count; L++ ) {
                    gridView.currentIndex = L
                    if( gridView.currentItem.state == "view" ) {
                        gridView.currentItem.state = "close"
                    } else {
                        gridView.currentItem.state = "view"
                    }
                }
            }
            onClicked: {
                var currItem = gridView.indexAt( ma.mouseX , ma.mouseY )
                if( currItem >= 0 ) {

                    for( var L=0; L<gridView.count; L++ ) {
                        if( L !== currItem ) {
                            gridView.currentIndex = L
                            gridView.currentItem.currentChat = false
                            gridView.currentItem.animBack()
                        } else {
                            gridView.currentIndex = L
                            panelHeader.visible = false
                            panelFooter.visible = false

                            gridView.currentItem.currentChat = true
                            gridView.currentItem.animBack()
                        }
                    }
                }

            } //onClicked
        } //MouseArea
    } //GridView


    /*****************************************************************************/
    property string __pageNext: "qrc:/qml/RosterPage.qml"
    property int __pageNextPause: 1000
    SequentialAnimation {
        id: animClosePage
        running: false
        PauseAnimation { duration: __pageNextPause }
        ScriptAction {
            script: main.loadPage = __pageNext
        }
    }

    ToolBar {
        id: toolBar
        ToolButton {
            id: toolBarButtonDialog
            icon: "qrc:/qml/images/bar_roster.png"
            anchors.left: parent.left
            anchors.leftMargin: 30
            onClicked: {
                for( var L=0; L<gridView.count; L++ ) {
                    gridView.currentIndex = L
                    gridView.currentItem.animBack()
                }
                if( cppListOfChats.count() === 0 ) {
                    __pageNextPause = 100
                } else {
                    __pageNextPause = 1600
                }
                __pageNext = "qrc:/qml/RosterPage.qml"
                animClosePage.running = true
            }
            visible: !stateChatClose
        }

        ToolButton {
            id: toolBarButtonNormalState
            icon: "qrc:/qml/images/bar_ok.png"
            anchors.left: parent.left
            anchors.leftMargin: 100
            onClicked: {
                for( var L=0; L<gridView.count; L++ ) {
                    gridView.currentIndex = L
                    gridView.currentItem.state = "view"
                }
                stateChatClose = false
            }
            visible: stateChatClose
        }
        ToolButton {
            id: toolBarButtonCloseAll
            icon: "qrc:/qml/images/bar_close.png"
            anchors.right: parent.right
            anchors.rightMargin: 100
            onClicked: {
                for( var L=0; L<gridView.count; L++ ) {
                    gridView.currentIndex = L
                    gridView.currentItem.state = "view"
                    //cppMyXmppClient.closeChat( contactJid )
                }
                stateChatClose = false
            }
            visible: stateChatClose
        }
    }


}
